<template>
  <view class="p_re">
    <view class="class_l dis_f">
      <!-- 左侧 -->
      <scroll-view scroll-y="true" class="w210 h bac_f8 pb50 bz">
        <view
          v-for="(item, index) in list_left"
          :key="index"
          class="lh100 fz26 tac"
          :class="{ active: isActive == item.sort }"
          @click="active_cik(item,index)"
        >
          <text>{{ item.name }}</text>
        </view>
      </scroll-view>
      <!-- 右侧 -->
      <scroll-view scroll-y="true" class="w540 pt100 h pb50 bz">
        <!-- 图片和副标题 -->
        <view
          class="fww auto tac dis_grid_n"
>
          <view class="mb24 p_re" v-for="(item, index) in list_right" :key="index" @click="goSeverDetail(item)">
            <image
              :src="item.image"
              mode="aspectFill"
              class="w120 h120 radius12 auto"
            ></image>
            <view
              v-if="item.label"
              class="class_sub p_ab"
              style="
                background-size: cover;
                width: 80rpx;
                height: 30rpx;
                top: 0;
                left: 30rpx;
              "
            >
              <view class="tf lh30" style="font-size: 16rpx">
                {{ item.label }}
              </view>
            </view>
            <view class="pt10 fz24">{{ item.name }}</view>
          </view>
        </view>
      </scroll-view>
    </view>
  </view>
</template>

<script>
import { classLeft, classRight } from "@/config/api.js";
export default {
  data() {
    return {
			cur_id:'',
      isActive: 1,
      list_left: [],
      list_right: [],
    };
  },
  onLoad(options) {
    this.class_left();
		if(options.cat1_id){
			this.currentActive(options);
		}
  },
  methods: {
		//跳转详情界面
		goSeverDetail(item){
			console.log(item);
			uni.navigateTo({
				url: '../../page_serve/serveDetail/serveDetail?id='+item.url
			});
		},
    //判断当前选中项
    currentActive(options) {
			console.log('页面',options.cat1_id);
      if (options.cat1_id) {
        this.isActive = options.cat1_id;
        this.class_right();
      }
    },
    //点击项改变
    active_cik(e,i) {
			this.isActive = e.sort
			classRight({ cat1_id:e.id}).then((res) => {
			  console.log(res);
			  this.list_right = res;
			});
    },
    // 左侧
    class_left() {
      classLeft().then((res) => {
        this.list_left = res;
				this.list_left.forEach(v=>{
					if(v.sort==this.isActive){
						this.cur_id = v.id
					}
				})
				this.class_right()
      });
    },
    // 右侧
    class_right() {
      classRight({ cat1_id:this.cur_id}).then((res) => {
        console.log(res);
        this.list_right = res;
      });
    },
  },
};
</script>

<style lang="scss">
page {
  background-color: #fff;
}
// 滚动组件
.u-notice-bar[data-v-24c07869] {
  padding: 0;
  width: 485rpx;
}

.class_l {
  position: fixed;
  left: 0;
  right: 0;
  top: 0rpx;
  bottom: 0;
}

.active {
  color: #fe3737;
  font-weight: bold;
  font-size: 30rpx;
  background: #fff;
}
.class_sub {
  background-image: url(@/static/image/class_icon_sub.png);
}
</style>
